<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body >
	<div id="example-1">
		<!--<input v-model="message" placeholder="edit me">
	    <p>Message is: {{ message }}</p>
		<span>Multiline message is:</span>
		<p style="white-space: pre-line;">{{ message }}</p>
		<br>
		<textarea v-model="message" placeholder="add multiple lines"></textarea>-->
		<input type="checkbox" id="checkbox" v-model="checked" />
		<label for="checkbox">{{ checked }}</label>
		<input type="checkbox" id="jack" value="jack" v-model="checkedNames" />
		<label for="jack">Jack</label>
		<input type="checkbox" id="john" value="John" v-model="checkedNames" />
		<label for="john">John</label>
		<input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
		<label for="mike">Mike</label>
		<br>
		<span>Checked names: {{ checkedNames }}</span>
		<br/>
		  <input type="radio" id="one" value="One" v-model="picked">
		  <label for="one">One</label>
		  <br>
		  <input type="radio" id="two" value="Two" v-model="picked">
		  <label for="two">Two</label>
		  <br>
		  <span>Picked: {{ picked }}</span>
		  <br/>
		   <select v-model="selected">
		      <option disabled value="">请选择</option>
		      <option value="1">A</option>
		      <option value="2">B</option>
		      <option value="3">C</option>
		    </select>
		    <span>Selected: {{ selected }}</span>
	</div>
	
		
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<script>
   var app = new Vue({
		 el: '#example-1',
		 data:{
			message: '',
			checked: false,
			checkedNames: [],
			picked: '',
			selected:'',
		 },
   }); 
</script>
</html>



















































